<template>
  <div class="myEvaluate">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待评价" name="待评价" />
      <el-tab-pane label="待追评" name="待追评" />
      <el-tab-pane label="已评价" name="已评价" />
    </el-tabs>
    <div class="search">
      <el-input
        v-model="query.search"
        maxlength="20"
        type="text"
        placeholder="请输入商品名称或订单号"
      />
      <svg-icon class="searchIcon" name="search" @click="getEvaluateList" />
    </div>
    <EvaluateTable
      :data="evaluateList"
      @eva="toEvaluate"
      @add-eva="toAddEvaluate"
      @detail="toEvaluateDetail"
    />
    <el-pagination
      :hide-on-single-page="true"
      :current-page="page.page"
      :page-size="page.pageSize"
      :total="page.total"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      style="justify-content: flex-end;"
    />
  </div>
</template>
<script setup>
import EvaluateTable from './evaluateList.vue'
import {
  getEvaluateData
} from '@/api/user/evaluate.js'
import { defineComponent, onBeforeMount, reactive, ref, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/svgIcon/index.vue';

defineComponent({
  name: 'MyEvaluate'
})

const router = useRouter();

let evaluateList = ref([]);
let query = reactive({
  search: '',
  type: 1
})
let page = reactive({
  page: 1,
  pageSize: 5,
  total: 0
})

function getEvaluateList () {
  getEvaluateData({
    search: query.search,
    type: query.type,
    page: page.page,
    pageSize: page.pageSize,
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      evaluateList.value = res.data.page.list
      page.total = parseInt(res.data.page.total)
    }
  }).catch(err => ElMessage.error(err.message))
}

function handleCurrentChange (val) {
  query.page = val
  getEvaluateList()
}

/**
 * tabs
 */
let activeName = shallowRef('待评价');
function handleClick (e) {
  query.type = Number(e.index) + 1
  getEvaluateList()
}

// 跳转到评价
function toEvaluate (item) {
  let data = {
    skus: [{
      orderId: item.orderId,
      commentId: item.commentId,
      productId: item.productId,
      skuId: item.skuId,
      image: item.productImage,
      productName: item.productName,
      price: item.productPrice,
      values: [item.value]
    }]
  }
  router.push({
    path: '/evaluate',
    query: {
      product: JSON.stringify(data)
    }
  })
}
// 查看评价
function toEvaluateDetail (item) {
  router.push({
    path: '/evaluateDetail',
    query: {
      data: JSON.stringify(item)
    }
  })
}
// 去追评
function toAddEvaluate (item) {
  router.push({
    path: '/addEvaluate',
    query: {
      data: JSON.stringify(item)
    }
  })
}
// 跳转到商品详情
// toProductDetail (id) {
//     this.$router.push({
//         path: '/productDetail',
//         query: {
//             productId: id
//         }
//     })
// },

onBeforeMount(() => {
  getEvaluateList()
})
</script>
<style lang="scss" scoped>
.myEvaluate {
  width: 100%;
  position: relative;

  $navBarHeight: 50px;
  :deep(.el-tabs) {
      .el-tabs__header {
        background-color: #FAFAFA;
        margin-bottom: 15px;
        height: $navBarHeight;
      }

      .el-tabs__nav {
        margin-left: 20px;
        height: $navBarHeight;
      }

      .el-tabs__item {
        height: $navBarHeight;
        line-height: $navBarHeight;
      }

      .el-tabs__nav-wrap::after {
        height: 0;
      }
    }

  .search {
    width: 280px;
    height: $navBarHeight;
    margin-right: 20px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    .searchIcon{
      width: 24px;
      height: 24px;
      position: absolute;
      right: 8px;
      cursor: pointer;
      z-index: 1000;
    }

    :deep(.el-input) {
      .el-input__wrapper{
        border-radius: 0;
      }
    }
  }

  .noorder {
    width: 100%;
    text-align: center;
    padding: 100px 0;

    p {
      margin-bottom: 20px;
    }

    .el-button {
      background-color: $mainGlod;
      color: #FFFFFF;
      font-weight: normal;
      border-radius: 0;
    }
  }

  .head {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    background-color: #F1F2F7;
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;

    div {
      display: flex;
    }
  }

  :deep(.el-pagination) {
    margin-top: 40px;
    text-align: right;

    .el-pager {
      li:not(.disabled):hover {
        color: $mainGlod;
      }

      li:not(.disabled).active {
        background-color: $mainGlod;
      }

      li:not(.disabled).active:hover {
        color: #F4F4F5;
      }
    }
  }
}
</style>
